<template>
    <div class="headerContainer">   
      <div class="headeContent">
            <div class="headerLocation">北京</div>
            <div class="headerLocationSelect"></div>
            <div class="headerSearchContainer">
                <div class="headerSearchLogo">
                    <i class="icon-search"></i>
                    <input type="text" placeholder="在北京找企业，找职位" class="headerSearchInput">
                </div>
                <div class="headerSearchVoice"><i class="icon-mic"></i></div>
            </div>
            <div class="headerShareLogo"><i class="icon-share2"></i></div>
        </div>
    </div>
</template>

<script>
export default {
    name:'homeHeader',
    data(){
        return{

        }
    }
}
</script>

<style>
.headerContainer{
    width: 100%;
    height: 1.2rem;
    background: linear-gradient(to right,#47a9d6,#7fd7ff);
}
.headeContent{
    display: flex;
    padding: 0.38rem 0.39rem 0.15rem 0.31rem;
    justify-content: space-between;
    align-items: center;
}
.headerLocation{
    font-size: 0.26rem;
    color: #FFFFFF;
}
.headerLocationSelect{
    margin-left: 0.12rem;
    width: 0rem;
    height: 0rem;
    border: 0.12rem solid;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) white;
    transform: rotate(45deg);
    margin-top: 0.22rem;
}
.headerSearchContainer{
    width: 4.98rem;
    height: 0.64rem;
    margin-left: 0.24rem;
    display: flex;
    background-color: #fff;
    border-radius: 0.1rem;
    justify-content: space-between;
    align-items: center;

}
.headerShareLogo{
    margin-left: 0.33rem;
    color: #ffffff;
    font-size: 0.3rem;
}
.headerSearchLogo{
    color: #a5b0b6;
    font-size: 0.3rem;
    margin-left: 0.25rem;
}
.headerSearchInput{
    outline: none;
    border: 0;
    margin-left: 0.18rem;
    width: 3rem;
    height: 0.5rem;
}
.headerSearchInput::placeholder{
    font-size: 0.24rem;
    color: #a5b0b6;
}
.headerSearchVoice{
    color: #a5b0b6;
    font-size: 0.3rem; 
    margin-right: 0.18rem;
}
</style>
